<div class="demo-button">
  <h4 class="demo-section-header">Buttons</h4>
  <section>
    @for (appearance of appearances; track $index) {
      <button [matButton]="appearance">{{appearance}}</button>
    }
    <button matFab>
      <mat-icon>check</mat-icon>
    </button>
    <button matMiniFab>
      <mat-icon>check</mat-icon>
    </button>
    <button matFab extended>Search</button>
    <button matFab extended>
      <mat-icon>check</mat-icon>
      Search
      <mat-icon iconPositionEnd>check</mat-icon>
    </button>
  </section>
  <section>
    @for (appearance of appearances; track $index) {
      <button
        [matButton]="appearance"
        disabled
        [disabledInteractive]="disabledInteractive"
        [matTooltip]="tooltipText">{{appearance}}</button>
    }
    <button
      matFab
      disabled
      [disabledInteractive]="disabledInteractive"
      [matTooltip]="tooltipText">
      <mat-icon>check</mat-icon>
    </button>
    <button
      matMiniFab
      disabled
      [disabledInteractive]="disabledInteractive"
      [matTooltip]="tooltipText">
      <mat-icon>check</mat-icon>
    </button>
    <button
      matFab
      extended
      disabled
      [disabledInteractive]="disabledInteractive"
      [matTooltip]="tooltipText">Search</button>
    <button
      matFab
      extended
      disabled
      [disabledInteractive]="disabledInteractive"
      [matTooltip]="tooltipText">
      <mat-icon>check</mat-icon>
      Search
      <mat-icon iconPositionEnd>check</mat-icon>
    </button>
  </section>

  <h4 class="demo-section-header">Anchors</h4>
  <section>
    @for (appearance of appearances; track $index) {
      <a href="//www.google.com" [matButton]="appearance">SEARCH</a>
    }
    <a href="//www.google.com" matFab>
      <mat-icon>check</mat-icon>
    </a>
    <a href="//www.google.com" matMiniFab>
      <mat-icon>check</mat-icon>
    </a>
    <a href="//www.google.com" matFab extended>Search</a>
    <a href="//www.google.com" matFab extended>
      <mat-icon>check</mat-icon>
      Search
      <mat-icon iconPositionEnd>check</mat-icon>
    </a>
  </section>
  <section>
    <a
      href="//www.google.com"
      disabled
      [disabledInteractive]="disabledInteractive"
      [matTooltip]="tooltipText"
      matButton
      color="primary">SEARCH</a>
    <a
      href="//www.google.com"
      disabled
      [disabledInteractive]="disabledInteractive"
      [matTooltip]="tooltipText"
      matButton="elevated">SEARCH</a>
    <a
      href="//www.google.com"
      disabled
      [disabledInteractive]="disabledInteractive"
      [matTooltip]="tooltipText"
      matButton="outlined"
      color="primary">SEARCH</a>
    <a
      href="//www.google.com"
      disabled
      [disabledInteractive]="disabledInteractive"
      [matTooltip]="tooltipText"
      matButton="filled">SEARCH</a>
    <a
      href="//www.google.com"
      disabled
      [disabledInteractive]="disabledInteractive"
      [matTooltip]="tooltipText"
      matFab>
      <mat-icon>check</mat-icon>
    </a>
    <a
      href="//www.google.com"
      disabled
      [disabledInteractive]="disabledInteractive"
      [matTooltip]="tooltipText"
      matMiniFab>
      <mat-icon>check</mat-icon>
    </a>
    <a
      href="//www.google.com"
      disabled
      [disabledInteractive]="disabledInteractive"
      [matTooltip]="tooltipText"
      matFab
      extended>Search</a>
    <a
      href="//www.google.com"
      disabled
      [disabledInteractive]="disabledInteractive"
      [matTooltip]="tooltipText"
      matFab
      extended>
      <mat-icon>check</mat-icon>
      Search
      <mat-icon iconPositionEnd>check</mat-icon>
    </a>
  </section>

  @for (appearance of appearances; track $index) {
    <h4 class="demo-section-header"><code>{{appearance}}</code> Appearance</h4>
    <section>
      <button [matButton]="appearance">unthemed</button>
      <button [matButton]="appearance" color="primary">primary</button>
      <button [matButton]="appearance" color="accent">accent</button>
      <button [matButton]="appearance" color="warn">warn</button>
      <button
        [matButton]="appearance"
        disabled
        [disabledInteractive]="disabledInteractive"
        [matTooltip]="tooltipText">disabled</button>
      <button [matButton]="appearance">
        <mat-icon>home</mat-icon>
        with icons
        <mat-icon iconPositionEnd>favorite</mat-icon>
      </button>
      <button [matButton]="appearance">
        <mat-icon>home</mat-icon>
        with icons
      </button>
    </section>
  }

  <h4 class="demo-section-header">Icon Buttons</h4>
  <section>
    <button matIconButton>
      <mat-icon>cached</mat-icon>
    </button>
    <button matIconButton color="primary">
      <mat-icon>cached</mat-icon>
    </button>
    <button matIconButton color="accent">
      <mat-icon>backup</mat-icon>
    </button>
    <button matIconButton color="warn">
      <mat-icon>trending_up</mat-icon>
    </button>
    <button
      matIconButton
      disabled
      [disabledInteractive]="disabledInteractive"
      [matTooltip]="tooltipText">
      <mat-icon>visibility</mat-icon>
    </button>
  </section>

  <h4 class="demo-section-header">Icon Button Anchors</h4>
  <section>
    <a href="#" matIconButton>
      <mat-icon>cached</mat-icon>
    </a>
    <a href="#" matIconButton color="primary">
      <mat-icon>cached</mat-icon>
    </a>
    <a href="#" matIconButton color="accent">
      <mat-icon>backup</mat-icon>
    </a>
    <a href="#" matIconButton color="warn">
      <mat-icon>trending_up</mat-icon>
    </a>
    <a
      href="#"
      matIconButton
      disabled
      [disabledInteractive]="disabledInteractive"
      [matTooltip]="tooltipText">
      <mat-icon>visibility</mat-icon>
    </a>
  </section>

  <h4 class="demo-section-header">FABs</h4>
  <section>
    <button matFab>
      <mat-icon>delete</mat-icon>
    </button>
    <button matFab color="primary">
      <mat-icon>delete</mat-icon>
    </button>
    <button matFab color="accent">
      <mat-icon>bookmark</mat-icon>
    </button>
    <button matFab color="warn">
      <mat-icon>home</mat-icon>
    </button>
    <button
      matFab
      disabled
      [disabledInteractive]="disabledInteractive"
      [matTooltip]="tooltipText">
      <mat-icon>favorite</mat-icon>
    </button>
  </section>

  <h4 class="demo-section-header">Mini FABs</h4>
  <section>
    <button matMiniFab>
      <mat-icon>menu</mat-icon>
    </button>
    <button matMiniFab color="primary">
      <mat-icon>menu</mat-icon>
    </button>
    <button matMiniFab color="accent">
      <mat-icon>plus_one</mat-icon>
    </button>
    <button matMiniFab color="warn">
      <mat-icon>filter_list</mat-icon>
    </button>
    <button
      matMiniFab
      disabled
      [disabledInteractive]="disabledInteractive"
      [matTooltip]="tooltipText">
      <mat-icon>home</mat-icon>
    </button>
  </section>

  <h4 class="demo-section-header">Interaction/State</h4>
  <section class="demo-no-flex">
    <div>
      <p>isDisabled: {{isDisabled}}</p>
      <p>Button 1 as been clicked {{clickCounter}} times</p>
      <p>
        <mat-checkbox [(ngModel)]="disabledInteractive">Allow disabled button interactivity</mat-checkbox>
      </p>
      <p>
        <mat-checkbox [(ngModel)]="isDisabled">All disabled</mat-checkbox>
      </p>
      <button matButton="filled" (click)="button1.focus()">Focus 1</button>
      <button matButton="filled" (click)="button2.focus()">Focus 2</button>
      <button matButton="filled" (click)="button3.focus()">Focus 3</button>
      <button matButton="filled" (click)="button4.focus()">Focus 4</button>
    </div>
    <div>
      <button matButton #button1 [disabled]="isDisabled"
              (click)="clickCounter=clickCounter+1">
        Button 1
      </button>
      <button matButton #button2 color="primary" [disabled]="isDisabled">
        Button 2
      </button>
      <a href="//www.google.com" #button3 matButton color="accent"
         [disabled]="isDisabled">
        Button 3
      </a>
      <button matButton="elevated" #button4 color="primary"
              [disabled]="isDisabled">
        Button 4
      </button>
      <button matMiniFab [disabled]="isDisabled">
        <mat-icon>check</mat-icon>
      </button>
      <button matIconButton color="accent" [disabled]="isDisabled">
        <mat-icon>favorite</mat-icon>
      </button>
    </div>
  </section>
</div>
